import {
  IFormProps,
  size,
  formItemLayout,
  getUploadResult,
  getImages,
  getFileList
} from "../../utils/common";
import React from "react";
import { Modal, Form, Input, Select, Checkbox } from "antd";
import * as api from "../../api/api";
import { FormComponentProps } from "antd/lib/form";
import Uploads from "../Uploads";
export interface StoreEditProps extends FormComponentProps {
  visible: boolean;
  store?: api.SingleUserMallStoresVOStoreVO;
  onSave: (any) => void;
  onCancel: () => void;
}
class StoreInfoEdit extends React.PureComponent<StoreEditProps, any> {
  constructor(props) {
    super(props);
  }

  state = {
    fileList: [],
    pictures: []
  };

  componentDidMount() {
    const images = this.props.store && this.props.store.certImages;
    const pictures = this.props.store && this.props.store.picture;
    this.setState({
      fileList: getFileList(images),
      pictures: getFileList(pictures)
    });
  }

  ok = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, form) => {
      if (!err) {
        form["certImages"] = getImages(this.state.fileList);
        form["picture"] = getImages(this.state.pictures);
        form["isInvalid"] = !form["isInvalid"];
        this.props.onSave(form);
      }
    });
  };

  cancel = () => {
    this.props.onCancel();
  };

  imageChange = fileList => {
    this.setState({ fileList });
  };

  pictureChange = pictures => {
    this.setState({ pictures });
  };

  render(): JSX.Element {
    const { getFieldDecorator } = this.props.form;
    const { store } = this.props;
    return (
      <Modal
        title="个人店铺信息"
        visible={this.props.visible}
        onOk={this.ok}
        onCancel={this.cancel}
        maskClosable={true}
      >
        <Form>
          <Form.Item label="店铺展示图片" {...formItemLayout}>
            {getFieldDecorator("picture", {
              rules: [
                {
                  required: true,
                  message: "请上传店铺图片"
                }
              ],
              initialValue: store && store.picture
            })(
              <Uploads
                editable={true}
                fileList={this.state.pictures}
                onChange={this.pictureChange}
              />
            )}
          </Form.Item>
          <Form.Item label="店铺描述" {...formItemLayout}>
            {getFieldDecorator("discription", {
              rules: [
                {
                  required: true,
                  message: "请输入店铺描述"
                }
              ],
              initialValue: store && store.discription
            })(<Input size={size} placeholder="请输入店铺描述" />)}
          </Form.Item>
          <Form.Item label="结算银行卡号" {...formItemLayout}>
            {getFieldDecorator("storeCardNumber", {
              rules: [
                {
                  required: true,
                  message: "请输入结算银行卡号"
                }
              ],
              initialValue: store && store.storeCardNumber
            })(<Input size={size} placeholder="请输入结算银行卡号" />)}
          </Form.Item>
          <Form.Item label="持卡人姓名" {...formItemLayout}>
            {getFieldDecorator("storeCardName", {
              rules: [
                {
                  required: true,
                  message: "请输入持卡人姓名"
                }
              ],
              initialValue: store && store.storeCardName
            })(<Input size={size} placeholder="请输入持卡人姓名" />)}
          </Form.Item>
          <Form.Item label="银行名称" {...formItemLayout}>
            {getFieldDecorator("bankCode", {
              initialValue: store && store.bankCode
            })(
              <Select style={{ width: 120 }}>
                <Select.Option value={"1002"}>工商银行</Select.Option>
                <Select.Option value={"1005"}>农业银行</Select.Option>
                <Select.Option value={"1026"}>中国银行</Select.Option>
                <Select.Option value={"1003"}>建设银行</Select.Option>
                <Select.Option value={"1001"}>招商银行</Select.Option>
                <Select.Option value={"1066"}>邮储银行</Select.Option>
                <Select.Option value={"1020"}>交通银行</Select.Option>
                <Select.Option value={"1004"}>浦发银行</Select.Option>
                <Select.Option value={"1006"}>民生银行</Select.Option>
                <Select.Option value={"1009"}>兴业银行</Select.Option>
                <Select.Option value={"1010"}>平安银行</Select.Option>
                <Select.Option value={"1021"}>中信银行</Select.Option>
                <Select.Option value={"1025"}>华夏银行</Select.Option>
                <Select.Option value={"1027"}>广发银行</Select.Option>
                <Select.Option value={"1022"}>光大银行</Select.Option>
                <Select.Option value={"1032"}>北京银行</Select.Option>
                <Select.Option value={"1056"}>宁波银行</Select.Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item label="客服电话" {...formItemLayout}>
            {getFieldDecorator("customerServicePhone", {
              rules: [
                {
                  required: true,
                  message: "请输入客服电话"
                }
              ],
              initialValue: store && store.customerServicePhone
            })(<Input size={size} placeholder="请输入客服电话" />)}
          </Form.Item>
          <Form.Item label="店铺地址" {...formItemLayout}>
            {getFieldDecorator("storeAddress", {
              rules: [
                {
                  required: true,
                  message: "请输入店铺地址"
                }
              ],
              initialValue: store && store.storeAddress
            })(<Input size={size} placeholder="请输入店铺地址" />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(StoreInfoEdit);
